<!--
 * @Author: your name
 * @Date: 2021-12-30 09:59:50
 * @LastEditTime: 2022-03-03 09:49:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \agricultural-production-web\src\views\statistical-report\yield-report\index.vue
-->
<template>
  <BaseMainSlot>
    <template v-slot:searchbox>
      <Search
        :day="true"
        :status="true"
        :search-list="reset"
        @search-list="searchList"
      >
        <template v-slot:leftTop>
          <div class="label-input mr-20">
            <div class="label">选择仓库:</div>
            <div class="input">
              <el-select v-model="reset.warehouseId" filterable clearable>
                <el-option value="" label="所有仓库" />
                <el-option
                  v-for="item in warehouseArr"
                  :key="item.warehouseId"
                  :label="item.warehouseName"
                  :value="item.warehouseId"
                />
              </el-select>
            </div>
          </div>
        </template>
        <template v-slot:right>
          <div class="search ml-20">
            <img src="~@/assets/action-bar-icon/search.png" @click="search" />
          </div>
          <div class="search ml-20">
            <img src="~@/assets/statistical-report/reset.png" @click="resets" />
          </div>
          <div class="search ml-20">
            <img
              src="~@/assets/statistical-report/export.png"
              @click="open"
            />
          </div>
        </template>
      </Search>
      <Time />
    </template>
    <template v-slot:content>
      <div class="main-boxone">
        <!-- 物品出库次数 -->
        <Main class="lesseeOutput">
          <template v-slot:top-name>
            出库次数
          </template>
          <template v-slot:main-content>
            <zhechart
              :cdata="farmtaskcdata"
              :nowheight="'220px'"
              :nowwidth="'99%'"
            />
          </template>
        </Main>
        <!-- 物品出库明细 -->
        <Main class="outputdetails">
          <template v-slot:top-name>
            出库明细
          </template>
          <template v-slot:main-content>
            <div class="top" :style="{width:slidertopStyle + '%'}">
              <el-table
                v-loading="loading"
                highlight-current-row
                :data="tableData"
                stripe
                border
                height="86.5%"
                class="reportTable"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column
                  prop="materialCode"
                  label="物料编码"
                />
                <!-- <el-table-column prop="agriculturalMaterialTypeName" label="农资类型" /> -->
                <el-table-column prop="agriculturalMaterialName" label="农资名称" />
                <el-table-column prop="number" label="出库数量">
                  <template slot-scope="scope">
                    {{ scope.row.number }}
                    <!-- {{ scope.row.unitName }} -->

                    {{ scope.row.perSpecUnitName }}

                  </template>
                </el-table-column>

                <el-table-column prop="agriculturalMaterialNumber" label="出库单价">
                  <template slot-scope="scope">
                    {{ scope.row.price }}
                    <span v-if="scope.row.perSpecUnitName">元/{{ scope.row.perSpecUnitName }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="totalPrice" label="出库农资总价">
                  <template v-if="scope.row.totalPrice" slot-scope="scope">
                    {{ scope.row.totalPrice }} 元
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="warehouseName" label="出库仓库" /> -->
                <el-table-column prop="outGoerName" label="出库人" />
                <el-table-column prop="receiverName" label="领用人" />
                <el-table-column
                  prop="outOfStockTime"
                  min-width="120"
                  :formatter="dateFormat"
                  label="出库时间"
                />
              </el-table>
              <Pagin
                :page-size="pageSize"
                :current-page="currentPage"
                :total-size="totalSize"
                @changePageSize="changePageSize"
                @changeCurrentPage="changeCurrentPage"
              />
            </div>
            <!-- v-if="conList.length !== 0" -->
            <div class="agricultural-statistics" :style="{ width:statisticsStyle + '%' }">
              <el-carousel :autoplay="false">
                <el-carousel-item v-for="(item, index) in conList" :key="index">
                  <div class="imgl">
                    <div
                      v-for="(item1, index1) in item"
                      :key="index1"
                      class="imgdet"
                      :style="{width: imgdetStyle + '%'}"
                    >
                      <div class="shadows-top">
                        {{ item1.warehouseName }}
                      </div>
                      <div class="shadows-main">
                        <h4>出库农资名称</h4>
                        <p>
                          <span>{{ item1.agriculturalMaterialName }}</span>
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>出库次数</h4>
                        <p>
                          <span>{{ item1.count }}</span> 次
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>出库总量</h4>
                        <p>
                          <span>{{ item1.totalNumber }}</span> {{ item1.unitName }}
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>总价</h4>
                        <p>
                          <span>{{ item1.totalPrice }}</span>元
                        </p>
                      </div>
                      <div class="shadows-bottom">
                        <h4>时间</h4>
                        <p>
                          <span>{{ item1.time }}</span>
                        </p>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </template>
        </Main>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import BaseMainSlot from "@/components/BaseMainSlot/report.vue";
import Pagin from "../components/Pagination";
import Search from "../components/search/index.vue";
import warehouseManage from "@/api/basic-info-manage/warehouse-manage";
import Main from "../components/main/index.vue";
import agriMateOutOfStock from "@/api/digital-operation/agri-mat-manage/agri-mat-outofstock";
import deliveryReport from "@/api/digital-operation/statistical-report/delivery-report";
import { mymixin } from "@/utils/mixin";
import zhechart from "../components/Echarts/components/linechart/chart.vue";
export default {
  components: { BaseMainSlot, Search, Main, zhechart, Pagin },
  mixins: [mymixin],
  data() {
    return {
      reset: {
        startDate: "",
        endDate: "",
        startTime: this.etPassYearFormatDate(),
        endTime: "",
        organizationNo: parseInt(sessionStorage.organizationNo),
        warehouseId: "",
        status: 0
      },
      status: true,
      lesseeList: [],
      warehouseArr: [],
      conList: [],
      abatchList: [],
      reportForm: {},
      // 农事任务信息
      farmtaskcdata: {},
      tableData: [],
      export: {},
      // 当前页
      currentPage: 1,
      // 每页的数据条数
      pageSize: 7,
      // 总条数
      totalSize: 0,
      slidertopStyle: 76,
      statisticsStyle: 23,
      imgdetStyle: 100
    };
  },
  created() {
    this.searchData();
  },
  mounted() {
    this.$nextTick(() => {
      this.search();
    })
  },
  methods: {
    // 搜索组件
    searchList(e) {
      // console.log(e);
      this.reset = e;
    },
    // 重置
    resets() {
      let etPassYearFormatDate = this.etPassYearFormatDate()
      // let time = new Date()
      // let endTime = (time).getTime()
      const y = new Date(etPassYearFormatDate).getFullYear()
      const f = y + ' 12-31 23:59:59:999'
      const endTime = new Date(f).getTime()
      // 重置搜索框
      this.reset = {
        startDate: "",
        endDate: "",
        startTime: etPassYearFormatDate,
        endTime: endTime,
        organizationNo: parseInt(sessionStorage.organizationNo),
        date: 'month',
        warehouseId: "",
        status: 1
      };
      this.$nextTick(() => {
        this.search()
      })
    },
    // 默认开始时间
    etPassYearFormatDate () {
      const y = new Date().getFullYear()
      // 第一天
      const f = y + ' 01-01 00:00:00'
      const date = new Date(f).getTime() - 365 * 24 * 60 * 60 * 1000
      // console.log(date)
      return date
    },
    // 总体调用接口
    datalist() {
      let params = {
        warehouseId: this.reset.warehouseId,
        startTime: this.reset.startDate || this.reset.startTime,
        endTime: this.reset.endDate || this.reset.endTime,
        unit: this.reset.date || "month"
        // organizationNo: this.reset.organizationNo
      };
      this.export = params
      this.tableDataList(params);
      this.getColumnChart(params);
      this.reportAllBatch(params);
    },
    // 表格数据
    async tableDataList(e) {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: e
      };
      const res = await agriMateOutOfStock.getAgriMateOutOfStockList(params);
      this.loading = false;
      let data = res.data;
      // // 赋值总条数
      if (!data) return
      this.totalSize = data.totalElements;
      // // 赋值数组
      this.tableData = data.content;
      this.tableData.forEach(item => {
        if (item.agriculturalMaterialOutOfStockMapper) {
          this.$set(item, "totalPrice", item.agriculturalMaterialOutOfStockMapper.totalPrice);
          this.$set(item, "number", item.agriculturalMaterialOutOfStockMapper.number);
          this.$set(item, "price", item.agriculturalMaterialOutOfStockMapper.price);
        }
        if (item.agriculturalMaterialBO) {
          this.$set(item, "agriculturalMaterialTypeName", item.agriculturalMaterialBO.agriculturalMaterialTypeName);
          this.$set(item, "agriculturalMaterialName", item.agriculturalMaterialBO.agriculturalMaterialName);
          this.$set(item, "unitName", item.agriculturalMaterialBO.unitName);
          this.$set(item, "perSpecUnitName", item.agriculturalMaterialBO.perSpecUnitName);
          this.$set(item, "materialCode", item.agriculturalMaterialBO.materialCode);
        }
      });
      let havline = this.tableData.length % this.pageSize;
      if (this.tableData.length < this.pageSize) {
        if (havline < this.pageSize) {
          const remain = this.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({
              indflag: i + this.tableData.length - 1
            });
          }
        }
      }
    },
    // 仓库下拉框数据
    async searchData() {
      // const { data: lessee } = await deliveryReport.organizationList();
      // this.lesseeList = lessee;
      //  条件查询所有仓库
      const {
        data: warehouse
      } = await warehouseManage.getWareHouseListByCondition();
      this.warehouseArr = warehouse;
    },
    // echarts
    getColumnChart(e) {
      deliveryReport.outHistogramChartList(e).then(res => {
        let data = res.data;
        let xAxisone = [];
        if (data.dateList) {
          xAxisone = data.dateList;
        }
        let addser = [];
        if (data.inoutMap) {
          let listone = data.inoutMap;
          for (let zz in listone) {
            let addobj = {
              name: zz,
              type: "bar",
              data: listone[zz],
              barMaxWidth: 50,
              itemStyle: {
                borderRadius: [6, 6, 0, 0]
              }
            };
            addser.push(addobj);
          }
        }
        // xAxisone = xAxisone.unshift('')
        this.farmtaskcdata = {
          xAxisdata: xAxisone,
          xData: data.materialNameList,
          seriesData: addser,
          unitName: '次'
        };
      });
    },
    open() {
      this.$confirm(`是否导出${this.$route.meta.title}.xlsx`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: "myClass"
      }).then(() => {
        this.exPort()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    // 导出
    async exPort() {
      // 点击导出搜索的数据
      this.downLoading = true;
      const data = await deliveryReport.exportExcel(this.export);
      this.downLoading = false;
      const blob = new Blob([data], {
        type: "application/vnd.ms-excel;charset=utf-8"
      });
      const link = document.createElement("a");
      // console.log()
      link.download = this.$route.meta.title + ".xlsx";
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 转化数据 跑马灯
    async reportAllBatch(e) {
      // 按农资统计
      const {
        data: reportAllBatch
      } = await deliveryReport.outCardInputList(e);
      if (reportAllBatch.length >= 4) {
        this.conList = this.traverList(reportAllBatch, 4);
        this.slidertopStyle = 100
        this.statisticsStyle = 100
        this.imgdetStyle = 24
      } else if (reportAllBatch.length < 4) {
        this.conList = this.traverList(reportAllBatch, 1);
        this.slidertopStyle = 76
        this.statisticsStyle = 23
        this.imgdetStyle = 100
      }
      // this.conList = this.traverList(reportAllBatch, 1);
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      const list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      return list;
    },
    dateFormat(row, colnum) {
      if (row.outOfStockTime) {
        // console.log(row)
        return this.$moment(row[colnum.property]).format("YYYY年-MM月-DD日 HH:mm:ss");
      }
    },
    search() {
      this.currentPage = 1;
      this.datalist();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.tableDataList(this.reset);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.tableDataList(this.reset);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/report.scss";
// ::v-deep .common-layout {
//     .zhcontent {
//       // height: calc(100% - 50px) !important;
//     }
//   }
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
}
// 基地权限
.lesseeOutput {
  // height: 265px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 30px;
  }
}
.outputdetails {
  // height: 1000px;
  ::v-deep .main-content {
    position: relative !important;
    padding: 50px 12px 20px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .top {
      padding: 5px;
      width: 76%;
      height: 400px;
      position: relative;
      margin-top: 10px;
    }

    // 农资
    .agricultural-statistics {
      height: 400px;
      width: 23%;
      position: relative;
      .left-top {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 50%);
      }
      .el-carousel {
        height: 100%;
        .el-carousel__container {
          height: 100%;
        }
      }
      .imgl {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
        position: relative;
        top: -16px;
        .imgdet {
          background: url("~@/assets/statistical-report/delivery-report/delivery.png")
            100% 100% no-repeat;
          background-size: 100% 100%;
          border-radius: 0;
          height: 85%;
          width: 96%;
          display: flex;
          align-items: center;
          flex-direction: column;
          position: relative;
          .shadows-top {
            box-sizing: content-box;
            position: absolute;
            top: -8%;
            transform: translate(0%, 50%);
            text-align: center;
            font-size: 12px;
            width: 166px;
            height: 26px;
            padding: 0 10px;
            box-sizing: border-box;
            line-height: 24px;
            background: rgba(1, 59, 77, 1);
            border: 1px solid #4affda;
            box-shadow: 0px 0 7px .5px rgb(255, 255, 255) inset;
            opacity: 1;
            border-radius: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          > div {
            width: 100%;
            h4 {
              padding: 0;
              margin: 6px 0 0 0;
              text-align: center;
              letter-spacing: 1px;
            }
            p {
              padding: 0;
              margin: 5px 0 0 0;
              width: 100%;
              text-align: center;
              letter-spacing: 1px;
              span {
                font-size: 18px;
              }
            }
          }
          div:nth-child(3) {
            margin: 8px 0;
            padding: 8px 0 0 0;
          }
          .shadows-main {
            margin: 5px 0 0 0;
            padding: 8px 0 0 0;
            height: 80px;
          }
          .shadows-bottom {
            height: 80px;
          }
        }
      }
    }
  }
}
::v-deep #chart {
  > div {
    bottom: 0;
  }
}
.facility {
  width: 210px;
  height: 20px;
  padding: 0 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  span {
    white-space: nowrap;
    // margin-left: 10px;
  }
}
.facility::-webkit-scrollbar {
  height: 4px;
}
// ::v-deep .el-carousel  {
//   .el-carousel__indicators--horizontal {
//   padding: 0 10px !important;
//   display: flex;
//   width: 100%;
//   overflow-x: auto;
//   justify-content: center;
//   }
//   .el-carousel__indicators--horizontal::-webkit-scrollbar {
//     height: 4px;
//   }
// }
</style>
